@include("admin.header")
  
  <body>
    <div class="x-body">
        <form class="layui-form" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label for="main_img" class="layui-form-label">
                    <span class="x-red">*</span>商品主图
                </label>
                <div class="layui-input-inline imgbox" style="width: 400px;">
                    <div class="layui-upload-drag" id="main_img">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="good_name" class="layui-form-label">
                    <span class="x-red">*</span>商品名称
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" id="good_name" name="good_name" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="good_price" class="layui-form-label">
                    <span class="x-red">*</span>商品价格
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="number" id="good_price" name="good_price" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="good_info" class="layui-form-label">
                    <span class="x-red">*</span>商品信息
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" id="good_info" name="good_info" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="good_addtime" class="layui-form-label">
                    <span class="x-red"></span>添加时间
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input class="layui-input"  name="good_addtime" id="good_addtime" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="classify_id" class="layui-form-label">
                    <span class="x-red">*</span>分类
                </label>
                <div class="layui-input-inline">
                    <select id="classify_id" name="classify_id" class="valid">
                        <option value="">请选择</option>
                        @foreach($cat as $v)
                        <option value="{{$v->classify_id}}">{{$v->classify_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="recommand" class="layui-form-label">
                    <span class="x-red">*</span>是否推荐
                </label>
                <div class="layui-input-inline">
                    <select id="recommand" name="recommand" class="valid">
                        <option value="">请选择</option>
                        <option value="1">是</option>
                        <option value="2">否</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="isnew" class="layui-form-label">
                    <span class="x-red">*</span>是否新品
                </label>
                <div class="layui-input-inline">
                    <select id="isnew" name="isnew" class="valid">
                        <option value="">请选择</option>
                        <option value="1">是</option>
                        <option value="2">否</option>
                    </select>
                </div>
            </div>
            
            <div class="layui-form-item layui-form-text">
                <label for="good_dec" class="layui-form-label">
                   商品描述
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="尽情地发挥吧" id="good_dec" name="good_dec" class="layui-textarea"></textarea>
                </div>
            </div>
            <div id="test1"></div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="" id="sub">
                    添加
                </button>
            </div>
      </form>
    </div>
    <div class="alert">
        提示信息
      </div>
      <style>
        .alert{
          position: fixed;
          width: 280px;
          height: 50px;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 9999;
          color: #fff;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          display: none;
        }
      </style>
    <script>
        //重置分页的样式
        function resetpage(){
            //把span标签改成a标签
            var spans = parent.$('.page-item span');
            for (let i = 0; i < spans.length; i++) {
                spans[i].outerHTML="<a href=''>"+spans[i].innerHTML+"</a>";
            }
            var arr = parent.$(".page-item a");
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].innerHTML=="‹") {
                    arr[i].className = "prev";
                }else if(arr[i].innerHTML=="›"){
                    arr[i].className = "next";
                }
            }
            //将当前页设置为active
            parent.$(".active a").attr("class","num active");
            //把li 上面的active 去除
            parent.$("li.active").removeClass("active");
            //给页码a标签换类名
            parent.$(".page-item .page-link").attr("class","num");
        }
        //更新父级窗口的数据
        function getGoodData(page,form){
          $.ajax({
              type:"get",
              url:"{{url('/admin/toget_good_list')}}",
              data:"page="+page,
              dataType:"html",
              success:function(res){
                parent.$(".list").html(res);
                resetpage();
                parent.layui.form.render();
              }
          })
        }
        //请求接口获取所有数据的条数
        function getCount(){
          $.ajax({
              type:"get",
              url:"{{url('/admin/toget_good_count')}}",
              data:"",
              dataType:"text",
              success:function(res){
                parent.$("#count").html("共有商品："+res+" 件");
              }
          })
        }
        
        layui.use(['form','layer','layedit','laydate','upload'], function(){
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var layedit = layui.layedit;
            var laydate = layui.laydate;
            var upload = layui.upload;
            upload.render({
                elem: '#main_img',
                // url: '/api/upload/',
                auto: false, //选择文件后不自动上传
                // bindAction: '#sub', //指向一个按钮触发上传
                choose: function(obj){
                    //将每次选择的文件追加到文件队列
                    var files = obj.pushFile();
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function(index, file, result){
                    // console.log(index); //得到文件索引
                    // console.log(file); //得到文件对象
                    image = file;
                    // console.log(result); //得到文件base64编码，比如图片
                    $(".imgbox").html("<img style='display:block;width:400px' src='"+result+"'>");
                    });
                }
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#good_addtime' //指定元素
            });
            var index = layedit.build('good_dec');
            var image = null;
            //监听提交
            form.on('submit(add)', function(data){
                data.field.good_dec = layedit.getContent(index);
                data.field.file = image;
                console.log(data.field);
                dataobj = data.field;
                var formData = new FormData();
                formData.append('main_img', image);
                for (const key in dataobj) {
                    formData.append(key,dataobj[key]);
                }
                // // console.log(formData);
                $.ajax({
                    url:"/admin/todo_addgood",
                    type:"post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType:"json",
                    success: function(res) {
                        if(res.code==1){
                            getGoodData(1,form);
                            getCount();
                            console.log(parent);
                            layer.alert(res.msg,function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                            });
                        }else{
                            layer.alert(res.msg);
                        }
                    },
                    error:function(data) {
                        $(".alert").html("服务器错误！").css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                            setTimeout(function () {
                            $(".alert").fadeOut(500);
                        },2000)
                    }
                });
                //发异步，把数据提交给php
                
                return false;
            });
        });
    </script>
  </body>

</html>